<template>
  <div>
    <Breadcrumb :style="{margin: '24px 20px'}">
      <BreadcrumbItem>用户测量数据</BreadcrumbItem>
      <BreadcrumbItem>二维尺寸数据</BreadcrumbItem>
    </Breadcrumb>
    <Card :style="{padding: '24px', minHeight: '680px', minWidth: '800px', background: '#fff', marginLeft: '20px'}">
      <Button class="predict-btn" @click="getPredictData">预测获取围度信息</Button>
      <Table border :data="tableData1">
        <TableColumn
            prop="type"
            label="尺寸类型"
            width='240'>
          </TableColumn>
          <TableColumn
            prop="value"
            label="测量值"
            width='240'>
          </TableColumn>
          <TableColumn
            prop="unit"
            label="单位"
            width='240'>
          </TableColumn>
          <TableColumn
            prop="date"
            label="更新时间"
            width='240'>
          </TableColumn>
          <TableColumn
            fixed="right"
            label="操作"
            width="240">
            <template slot-scope="scope">
              <Button @click="handleClick(scope.row)" type="text" size="small">预测</Button>
            </template>
          </TableColumn>
        </Table>
    </Card>
  </div>
</template>
<script>
export default {
  name: 'twoDData',
  data() {
    return {
      hasData: true,
      tableData1: [{
        type: '胸围',
        unit: 'mm'
      }, {
        type: '腰围',
        unit: 'mm'
      }, {
        type: '臀围',
        unit: 'mm'
      }, {
        type: '腿围',
        value: 220,
        unit: 'mm'
      }, {
        type: '臂围',
        value: 360,
        unit: 'mm'
      }]
    }
  },
  methods: {
    handleClick (row) {
      console.log(row)
    },
    async getPredictData () {
      const res = await this.$http.get('/measure/predict', {
        params: {
          username: 'ljp'
        }
      })
      if (res.code === 200) {
        const newTableData = []
        const measureData = res.data
        const keys = Object.keys(measureData)
        keys.forEach(keyName => {
          const filterItem = this.tableData1.filter(item => {
            return item.type === keyName
          })
          if (filterItem.length > 0) {
            const newItem = filterItem[0]
            newItem.value = measureData[keyName]
            newItem.date = "now" 
            newTableData.push(newItem)
          }
        })
        // console.log(newTableData)
        this.tableData1 = newTableData
        this.hasData = true
      }
    },
    async getTwoDimensionData () {
      const res = await this.$http.get('/measure/getTwoDimension', {
        params: {
          username: 'ljp'
        }
      })
      if (res.code === 200) {
        const newTableData = []
        const measureData = res.data
        const keys = Object.keys(measureData)
        keys.forEach(keyName => {
          const filterItem = this.tableData1.filter(item => {
            return item.type === keyName
          })
          if (filterItem.length > 0) {
            const newItem = filterItem[0]
            newItem.value = measureData[keyName]
            newItem.date = res.dataDate
            newTableData.push(newItem)
          }
        })
        // console.log(newTableData)
        this.tableData1 = newTableData
        return true
      } else {
        return false
      }
    }
  },
  mounted () {
    this.getTwoDimensionData()
  }
}
</script>
<style scoped lang="less">
  .predict-btn {
    margin-bottom: 20px;
  }
</style>
